<template>
  <div id="bill-templates" class="card">
    <div class="card-header">模板</div>
    <div class="card-body bg-info text-white py-0">已有</div>
    <table class="table">
      <thead>
        <tr>
          <td>模板编号</td>
          <td>模板名称</td>
          <td>创建时间</td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(info, index) in templates" :key="index">
          <td>{{ info.templateNo }}</td>
          <td>{{ info.name }}</td>
          <td>{{ info.createTime }}</td>
          <td>
            <button
              type="button"
              class="btn btn-sm btn-info"
              @click.stop="copyTemplate(info.id)"
            >
              复制
            </button>
          </td>
          <td>
            <button
              type="button"
              class="btn btn-sm btn-danger"
              @click.stop="deleteTemplate(info.id)"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="card-body bg-info text-white py-0">新建</div>
    <div class="card-body px-0">
      <div
        class="tab-pane fade show active"
        id="new"
        role="tabpanel"
        aria-labelledby="profile-tab"
      >
        <div class="card">
          <div class="card-body">
            <div class="d-flex border-1">
              通用：
              <template v-for="(info, index) in dataFields">
                <template v-if="info.dataType === 0">
                  <span
                    class="text-info"
                    @click.stop="addDataField(info)"
                    :key="index"
                    >{{ info.name }}</span
                  >&nbsp;
                </template>
              </template>
            </div>
            <div class="d-flex">
              机票：
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 1"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
            <div class="d-flex">
              机票（退票）：
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 1002"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
            <div class="d-flex">
              机票（改签）：
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 1003"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
            <div class="d-flex">
              酒店：
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 2"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
            <div class="d-flex">
              火车票:
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 3"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
            <div class="d-flex">
              服务：
              <template v-for="info in dataFields">
                <span
                  class="text-info ms-2"
                  v-if="info.dataType === 4"
                  @click.stop="addDataField(info)"
                  >{{ info.name }}</span
                >
              </template>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-6">
                <label>模板名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.trim="templateName"
                />
              </div>
            </div>
          </div>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="1"
                    v-model.number="currentDataType"
                  />机票
                </td>
                <template v-for="(info, index) in flightFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(1, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="1002"
                    v-model.number="currentDataType"
                  />退票
                </td>
                <template v-for="(info, index) in refundFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(1002, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="1003"
                    v-model.number="currentDataType"
                  />改签
                </td>
                <template v-for="(info, index) in changeFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(1003, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="2"
                    v-model.number="currentDataType"
                  />酒店
                </td>
                <template v-for="(info, index) in hotelFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(2, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="3"
                    v-model.number="currentDataType"
                  />火车
                </td>
                <template v-for="(info, index) in trainFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(3, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
              <tr>
                <td>
                  <input
                    type="radio"
                    value="4"
                    v-model.number="currentDataType"
                  />服务
                </td>
                <template v-for="(info, index) in vasFields">
                  <td>
                    {{ index + 1 }}-{{ info.name }}
                    <a
                      href="javascript:void(0)"
                      @click.stop="removeDataField(4, index)"
                      ><i class="mdi mdi-delete text-danger"></i
                    ></a>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
          <div class="card-footer">
            <button
              type="button"
              class="btn btn-primary"
              @click.stop="createTemplate()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchDataFields,
  createDataTemplate,
  searchDataTemplates,
  deleteDataTemplates,
} from "@/api/admin";

export default {
  data() {
    return {
      dataFields: [],

      flightFields: [],
      refundFields: [],
      changeFields: [],
      hotelFields: [],
      trainFields: [],
      vasFields: [],
      templateName: "",

      currentDataType: 1,

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      templates: [],
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      searchDataFields((v) => {
        this.dataFields = v;
      });

      this.searchTemplates();
    },
    searchTemplates: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
      };

      searchDataTemplates(params, (v) => {
        this.templates = v.dataList;
        // this.sc = v.page
      });
    },
    addDataField: function (info) {
      let dataType = info.dataType;
      if (info.dataType === 0) {
        //如果是通用类型，则类型设置为当前行的数据类型
        dataType = this.currentDataType;
      } else if (info.dataType === 1 && this.currentDataType === 1002) {
        //退票
        dataType = this.currentDataType;
      } else if (info.dataType === 1 && this.currentDataType === 1003) {
        //改签
        dataType = this.currentDataType;
      } else if (info.dataType !== 0) {
        this.currentDataType = dataType;
      }

      const newField = {
        dataType: dataType,
        id: info.id,
        name: info.name,
      };

      if (this.currentDataType === 1) {
        this.flightFields.push(newField);
      } else if (this.currentDataType === 1002) {
        this.refundFields.push(newField);
      } else if (this.currentDataType === 1003) {
        this.changeFields.push(newField);
      } else if (this.currentDataType === 2) {
        this.hotelFields.push(newField);
      } else if (this.currentDataType === 3) {
        this.trainFields.push(newField);
      } else if (this.currentDataType === 4) {
        this.vasFields.push(newField);
      }
    },
    removeDataField: function (dataType, idx) {
      if (dataType === 1) {
        this.flightFields.splice(idx, 1);
      } else if (dataType === 1002) {
        this.refundFields.splice(idx, 1);
      } else if (dataType === 1003) {
        this.changeFields.splice(idx, 1);
      } else if (dataType === 2) {
        this.hotelFields.splice(idx, 1);
      } else if (dataType === 3) {
        this.trainFields.splice(idx, 1);
      } else if (dataType === 4) {
        this.vasFields.splice(idx, 1);
      }
    },
    createTemplate: function () {
      const params = {
        flightFields: this.flightFields,
        refundFields: this.refundFields,
        changeFields: this.changeFields,
        hotelFields: this.hotelFields,
        trainFields: this.trainFields,
        vasFields: this.vasFields,
        name: this.templateName,
      };

      const jsonParams = JSON.stringify(params);

      createDataTemplate(jsonParams, (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg("保存失败: " + jsonResult.errmsg);
        } else {
          this.showErrMsg("保存成功");
          this.searchTemplates();
        }
      });
    },
    deleteTemplate: function (id) {
      deleteDataTemplates(id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg);
        } else {
          this.showErrMsg("操作成功");
          this.searchTemplates();
        }
      });
    },
    copyTemplate: function (id) {
      this.reset();

      for (const tpl of this.templates) {
        if (tpl.id === id) {
          this.templateName = tpl.name;

          for (const fld of tpl.exportFields) {
            this.currentDataType = fld.dataType;

            const newField = {
              dataType: fld.dataType,
              id: fld.dataFieldInfo.id,
              name: fld.dataFieldInfo.name,
            };

            if (this.currentDataType === 1) {
              this.flightFields.push(newField);
            } else if (this.currentDataType === 1002) {
              this.refundFields.push(newField);
            } else if (this.currentDataType === 1003) {
              this.changeFields.push(newField);
            } else if (this.currentDataType === 2) {
              this.hotelFields.push(newField);
            } else if (this.currentDataType === 3) {
              this.trainFields.push(newField);
            } else if (this.currentDataType === 4) {
              this.vasFields.push(newField);
            }
          }
        }
      }
    },
    reset: function () {
      this.templateName = "";
      this.flightFields.splice(0);
      this.refundFields.splice(0);
      this.changeFields.splice(0);
      this.hotelFields.splice(0);
      this.trainFields.splice(0);
      this.vasFields.splice(0);
    },
  },
};
</script>